<template>
  <div>
    <!-- 表格操作项 start  -->
    <template v-for="(item, index) in tableBtn">
      <Button
        :key="index"
        type="primary"
        :icon="item.icon"
        class="ivu-mr-8"
        v-if="showBtn(item.label)"
        @click="tableTopOperate(item.name)"
        >{{ item.label }}</Button
      >
    </template>

    <!-- <Button icon="md-list"
                class="ivu-ml-8"
                v-show="tableBatchBtns && tableBatchBtns.length>0 && tableSelectData &&tableSelectData.length">批量操作</Button> -->
    <Dropdown
      class="ivu-ml-8"
      v-show="tableSelectData && tableSelectData.length > 0"
      @on-click="handleClickItem"
    >
      <Button>更多操作 <Icon type="ios-arrow-down" /></Button>
      <DropdownMenu slot="list">
        <template v-for="(item, index) in tableBatchBtns">
          <DropdownItem
            v-if="showBtn(item.label)"
            :key="index"
            :name="item.name"
            >{{ item.label }}</DropdownItem
          >
        </template>
      </DropdownMenu>
    </Dropdown>
    <!-- 表格操作项 end  -->
  </div>
</template>
<script>
import dynamictablebtns from '@/mixins/dynamictablebtns'; // 混入通用代码
import { ApiRequest } from '@api/basePage';
import { mapGetters } from 'vuex';
export default {
  mixins: [dynamictablebtns],
  data () {
    return {};
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  methods: {
    handleClickItem (name) {
      if (name === 'delete') {
        this.$Modal.confirm({
          title: '批量删除',
          content: '确定要删除这些数据吗？',
          onOk: () => {
            let uuidArr = [];
            this.tableSelectData.forEach(item => {
              uuidArr.push(item.uuid);
            });
            let data = {
              uuids: uuidArr.join(',')
            };
            // 开始请求列表
            ApiRequest(
              this.requestApi.delsTableList.url,
              this.requestApi.delsTableList.type,
              data,
              true
            ).then(res => {
              if (res.retStatus === '1') {
                this.$Message.success('批量删除成功');
                this.tableSelectData = [];
                this.actionsChange();
              } else {
                this.$Message.error('该分类下已有属性值，不可删除！');
              }
            });
          }
        });
      }
    }
  }
};
</script>
